<template>
  <div>
    首页
    <button @click="btnClick">跳转路由</button>
    <div>{{ num | filterFn }}</div>
    <button @click="bol = !bol">切换</button>
    <div v-if="bol">123</div>
  </div>
</template>
<script>
// 组合api没有methods这些东西的，没有data
export default {
  filters: {
    // 不能使用this,只能用于{{}}  v-bind，作用是数据转换
    filterFn(n) {
      console.log('filterFn')
      return n * 2
    }
  },
  data() {
    return {
      num: 1,
      bol: true
    }
  },
  created() {
    console.log('home created')
  },
  methods: {
    fn(n) {
      console.log('fn')
      return n * 2
    },
    btnClick() {
      this.$router.push('/dashboard?num=' + Math.random() * 999)
    }
  },
  beforeRouteEnter(to, from, next) {
    console.log('beforeRouteEnter')
    next((v) => {
      console.log(v.num)
    })
  },
  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate', this.$route.fullPath, to)
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('beforeRouteLeave')
    next()
  }
}
</script>
<style></style>
